<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :span="4">
                        <a-form-model-item label="手机号">
                            <j-input v-model="queryParam.phone" placeholder="请输入手机号" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-model-item label="姓名">
                            <j-input v-model="queryParam.name" placeholder="请输入姓名" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="5">
                        <a-form-model-item label="所属公司">
                            <j-dict-select-tag v-model="queryParam.companyId"
                                dict-code="HC_COMPANY_INFO,COMPANY_NAME,ID,DEL_FLAG=0" placeholder="请选择所属公司"
                                @change="searchQuery" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload"
                                style="margin-left: 8px">重置</a-button>
                            <a-button type="primary" @click="showRechargeSetModal"
                                style="margin-left: 8px">设置自动处置金额</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div>
            <a-table ref="table" size="middle" :scroll="{ x: true }" :bordered="false" rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
                @change="handleTableChange">
                <template slot="autoSlot" slot-scope="text,record">
                    <a-switch :checked="text == 1" @change="changeState(record)" checked-children="是"
                        un-checked-children="否" size="large" />
                </template>
                <span slot="action" slot-scope="text, record">
                    <a @click="showManualRechargeModal(record)">手动储值</a>
                    <a-divider type="vertical" />
                    <a @click="showRechargeListModal(record)">查看储值记录</a>
                </span>
            </a-table>
        </div>
        <manual-recharge-modal ref="manualRechargeModalRef"></manual-recharge-modal>
        <recharge-list-modal ref="rechargeListModalRef"></recharge-list-modal>
        <recharge-set-modal ref="rechargeSetModalRef"></recharge-set-modal>
    </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@api/manage'
import ManualRechargeModal from './modules/manualRechargeModal.vue'
import RechargeListModal from './modules/rechargeListModal.vue'
import RechargeSetModal from './modules/rechargeSetModal.vue'

export default {
    name: 'HcRiderList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
        ManualRechargeModal,
        RechargeListModal,
        RechargeSetModal
    },
    data() {
        return {
            description: '企业账户',
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '公司名称',
                    align: "center",
                    dataIndex: 'companyName',
                },
                {
                    title: '姓名',
                    align: "center",
                    dataIndex: 'name',
                },
                {
                    title: '手机号',
                    align: "center",
                    dataIndex: 'phone',
                },
                {
                    title: '添加时间',
                    align: "center",
                    dataIndex: 'createTime'
                },
                {
                    title: '工作日储值金额',
                    align: "center",
                    dataIndex: 'account',
                },
                {
                    title: '是否自动储值',
                    align: "center",
                    dataIndex: 'account1',
                    scopedSlots: { customRender: 'autoSlot' }
                },
                {
                    title: '账户金额',
                    align: "center",
                    dataIndex: 'amount',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            url: {
                list: "hc/hcUser/list",
                delete: "hc/hcCompanyInfo/delete",
            },
            dictOptions: {},
            superFieldList: [],
            baseUrl: '',
        }
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        loadData(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            var params = this.getQueryParams();//查询条件
            this.loading = true;
            postAction(this.url.list, params).then((res) => {
                if (res.success) {
                    //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                    this.dataSource = res.result.records || res.result;
                    if (res.result.total) {
                        this.ipagination.total = res.result.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                    //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                } else {
                    this.$message.warning(res.message)
                }
            }).finally(() => {
                this.loading = false
            })
        },
        async changeState(record) {
            record.state = record.state == 'yes' ? 'no' : 'yes';
        },
        //展示手动储值弹窗
        showManualRechargeModal(id) {
            this.$refs.manualRechargeModalRef.show(id)
        },
        //展示处置记录弹窗
        showRechargeListModal(id) {
            this.$refs.rechargeListModalRef.show(id)
        },
        showRechargeSetModal() {
            this.$refs.rechargeSetModalRef.show()
        }
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>